<template>
	<view>
		<view class="container">
			<van-tabs :active="active" @change="onChange">
				<van-tab title="待付款">
					<!-- <view class="you">
						内容 1
					</view> -->
					<view class="wu" v-if="fukuan==''">
						<van-empty class="custom-image" description="当前内容为空" image="../../../static/img/empty.jpg" />
					</view>



					<view class="you" v-if="fukuan!=[]">



						<view class="item" v-for="(item,index) in fukuan">

							<view class="itembottom">
								<!-- <radio checked="false" /> -->
								<view class="IMG">
									<image :src="fukuan[index].orderItemDtos[0].pic" mode=""></image>
								</view>
								<view class="cebian">
									<view class="cebiantop">
										<view class="cebiantoptop">
											{{fukuan[index].orderItemDtos[0].prodName}}
										</view>
										<view class="cebiantopbottom">
											{{fukuan[index].orderItemDtos[0].skuName}}
										</view>
									</view>
									<view class="cebianbottom">
										<view class="jiage">
											￥{{fukuan[index].orderItemDtos[0].price}}
										</view>
										<view class="cebianbottomright">
											<view class="shuliang">
												x{{fukuan[index].orderItemDtos[0].prodCount}}
											</view>


										</view>

									</view>
								</view>
							</view>

						</view>




					</view>




				</van-tab>
				<van-tab title="待发货">
					<!-- <view class="you">
						内容 2
					</view> -->
					<view class="wu" v-if="fahuo==''">
						<van-empty class="custom-image" description="当前内容为空" image="../../../static/img/empty.jpg" />
					</view>
					<view class="you" v-if="fahuo!=[]">

						<view class="item" v-for="(item,index) in fahuo">

							<view class="itembottom">
								<!-- <radio checked="false" /> -->
								<view class="IMG">
									<image :src="fahuo[index].orderItemDtos[0].pic" mode=""></image>
								</view>
								<view class="cebian">
									<view class="cebiantop">
										<view class="cebiantoptop">
											{{fahuo[index].orderItemDtos[0].prodName}}
										</view>
										<view class="cebiantopbottom">
											{{fahuo[index].orderItemDtos[0].skuName}}
										</view>
									</view>
									<view class="cebianbottom">
										<view class="jiage">
											￥{{fahuo[index].orderItemDtos[0].price}}
										</view>
										<view class="cebianbottomright">
											<view class="shuliang">
												x{{fahuo[index].orderItemDtos[0].prodCount}}
											</view>


										</view>

									</view>
								</view>
							</view>

						</view>


					</view>
				</van-tab>
				<van-tab title="待收货">
					<!-- <view class="you">
						内容 3
					</view> -->
					<view class="wu" v-if="shouhuo==''">
						<van-empty class="custom-image" description="当前内容为空" image="../../../static/img/empty.jpg" />
					</view>

					<view class="you" v-if="shouhuo!=''">



						<view class="item" v-for="(item,index) in shouhuo">

							<view class="itembottom">
								<!-- <radio checked="false" /> -->
								<view class="IMG">
									<image :src="shouhuo[index].orderItemDtos[0].pic" mode=""></image>
								</view>
								<view class="cebian">
									<view class="cebiantop">
										<view class="cebiantoptop">
											{{shouhuo[index].orderItemDtos[0].prodName}}
										</view>
										<view class="cebiantopbottom">
											{{shouhuo[index].orderItemDtos[0].skuName}}
										</view>
									</view>
									<view class="cebianbottom">
										<view class="jiage">
											￥{{shouhuo[index].orderItemDtos[0].price}}
										</view>
										<view class="cebianbottomright">
											<view class="shuliang">
												x{{shouhuo[index].orderItemDtos[0].prodCount}}
											</view>


										</view>

									</view>
								</view>
							</view>

						</view>




					</view>


				</van-tab>
				<van-tab title="待评价">
					<!-- <view class="you">
						内容 4
					</view> -->
					<view class="wu" v-if="pingjia==''">
						<van-empty class="custom-image" description="当前内容为空" image="../../../static/img/empty.jpg" />
					</view>

					<view class="you" v-if="pingjia!=''">



						<view class="item" v-for="(item,index) in pingjia">

							<view class="itembottom">
								<!-- <radio checked="false" /> -->
								<view class="IMG">
									<image :src="pingjia[index].orderItemDtos[0].pic" mode=""></image>
								</view>
								<view class="cebian">
									<view class="cebiantop">
										<view class="cebiantoptop">
											{{pingjia[index].orderItemDtos[0].prodName}}
										</view>
										<view class="cebiantopbottom">
											{{pingjia[index].orderItemDtos[0].skuName}}
										</view>
									</view>
									<view class="cebianbottom">
										<view class="jiage">
											￥{{pingjia[index].orderItemDtos[0].price}}
										</view>
										<view class="cebianbottomright">
											<view class="shuliang">
												x{{pingjia[index].orderItemDtos[0].prodCount}}
											</view>


										</view>

									</view>
								</view>
							</view>

						</view>




					</view>



				</van-tab>
			</van-tabs>
		</view>

	</view>
</template>

<script>
	import {
		getWode
	} from '../../../api/wode.js'
	export default {
		data() {
			return {
				active: 1,
				shuju: [],
				fukuan: [],
				fahuo: [],
				shouhuo: [],
				pingjia: [],
			};
		},
		onShow() {
			this.GETWODE()
		},
		methods: {
			async GETWODE() {
				let result = await getWode({
					status: 0
				})
				console.log(result, "result")
				this.shuju = result.data.data.records
				for (let i = 0; i < this.shuju.length; i++) {
					if (this.shuju[i].status == 2) {
						this.fahuo.push(this.shuju[i])
					}
					if (this.shuju[i].status == 1) {
						this.fukuan.push(this.shuju[i])
					}
					if (this.shuju[i].status == 3) {
						this.shouhuo.push(this.shuju[i])
					}
					if (this.shuju[i].status == 4) {
						this.pingjia.push(this.shuju[i])
					}
				}
				console.log(this.fukuan, "fukuan")

			}

		}
	}
</script>

<style lang="scss">
	.item {
		margin-top: 50rpx;

		.title {
			margin-left: 50rpx;
			font-weight: 900;
			font-size: 40rpx;
		}

		.itembottom {
			margin-top: 20rpx;
			display: flex;

			.xuanze {
				margin-left: 5rpx;
				display: flex;
				align-items: center;
				margin-right: 20rpx;
			}

			.IMG {
				margin-right: 10rpx;

				image {
					width: 200rpx;
					height: 200rpx;
				}
			}

			.cebian {
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.cebiantop {
					.cebiantoptop {
						font-weight: 700;
						font-size: 35rpx;
					}

					.cebiantopbottom {
						font-size: 30rpx;
						font-weight: 200;
					}
				}

				.cebianbottom {
					display: flex;

					.jiage {
						color: red;
						width: 30%;

					}

					.cebianbottomright {
						width: 70%;
						display: flex;
						flex-direction: column;

						// background-color: red;
						.shuliang {
							text-align: center;
						}

						.jisuan {
							text-align: center;

						}
					}

				}
			}
		}
	}
</style>